@charset "utf-8";
@component-namespace app-service {
  @b navbar {
    width: var(--app-service-navbar-width);
    height: var(--app-service-navbar-height);
    line-height: @height;
    color: var(--app-service-navbar-color);
    font-size: var(--app-service-navbar-font-size);
    background-color: var(--app-service-navbar-background-color);
    text-align: center;
    white-space: nowrap;
    @utils-user-select none;
    display: flex;
    justify-content: center;
    align-items: center;
    @e brand-wrapper {
      width: var(--app-service-navbar-brand-wrapper-width);
      height: var(--app-service-navbar-brand-wrapper-height);
      line-height: @height;
    }
    @e items-wrapper {
      width: var(--app-service-navbar-items-wrapper-width);
      height: var(--app-service-navbar-items-wrapper-height);
      line-height: @height;
      display: flex;
      justify-content: center;
      align-items: center;
      @e item {
        flex: 0 0 auto;
        width: var(--app-service-navbar-items-wrapper-item-width);
        height: var(--app-service-navbar-items-wrapper-item-height);
        /*margin: var(--app-service-navbar-items-wrapper-item-margin);*/
        line-height: @height;
        letter-spacing: 0.05rem;
        /*padding-left: 0.05rem;*/
        outline: none;
        color: white;
        &::-moz-focus-inner {
          border: 0;
        }
        &:focus, &:hover, &:active {
          color: white !important;
          border: var(--app-service-navbar-items-wrapper-active-item-border);
          /*border-radius: var(--app-service-navbar-items-wrapper-active-item-border-radius);*/
          background-color: var(--app-service-navbar-items-wrapper-active-item-background-color);
        }
        @m active {
          color: white !important;
          border: var(--app-service-navbar-items-wrapper-active-item-border);
          /*border-radius: var(--app-service-navbar-items-wrapper-active-item-border-radius);*/
          background-color: var(--app-service-navbar-items-wrapper-active-item-background-color);
        }
      }
    }
    @e icons-wrapper {
      margin-top: 0.01rem;
      width: var(--app-service-navbar-icons-wrapper-width);
      height: var(--app-service-navbar-icons-wrapper-height);
      line-height: @height;
      @e icon {
      	color: white !important;
        display: block;
        width: var(--app-service-navbar-icons-wrapper-icon-width);
        height: var(--app-service-navbar-icons-wrapper-icon-height);
        margin: var(--app-service-navbar-icons-wrapper-icon-margin);
        line-height: @height;
        font-size: var(--app-service-navbar-icons-wrapper-icon-font-size);
        font-weight: var(--app-service-navbar-icons-wrapper-icon-font-weight);
        cursor: pointer;
        &:hover, &:active {
          color: white !important;
          border: var(--app-service-navbar-items-wrapper-active-item-border);
          border-radius: var(--app-service-navbar-items-wrapper-active-item-border-radius);
          background-color: var(--app-service-navbar-items-wrapper-active-item-background-color);
        }
      }
    }
    @e funcs-wrapper {
      @m auth {
        width: var(--app-service-navbar-funcs-wrapper-width);
        height: var(--app-service-navbar-funcs-wrapper-height);
        line-height: @height;
        display: flex;
        align-items: center;
        justify-content: center;
        @e account-info {
          display: flex;
          align-items: center;
          justify-content: center;  
          width: var(--app-service-navbar-funcs-wrapper-single-func-width);
          @e content {
            height: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            @e pic-wrapper {
              width: 1.5rem;
              height: 1.5rem;
              flex: 0 0 auto;
              border-radius: 100%;
              margin-right: 0.2rem;
              display: flex;
              align-items: center;
              justify-content: center;
              & img {
                border-radius: 100%;
                width: 80%;
                height: 80%;
              }
            }
            @e username {
              flex: 1 0 auto;
              height: 1.5rem;
              display: flex;
              align-items: center;
              justify-content: left;              
              font-size: var(--assist-font-size-small);
              font-family: 'consolas';
              color: var(--color-white);
            }  
          }
        }        
      }
      @m unauth {
        width: var(--app-service-navbar-funcs-wrapper-width);
        height: var(--app-service-navbar-funcs-wrapper-height);
        line-height: @height;        
        display: flex;
        justify-content: center;
        align-items: center;
        @e to-login {
          padding-right: 0.5rem;
          cursor: pointer;
          width: var(--app-service-navbar-funcs-wrapper-double-func-width);
          text-align: right;
        }
        @e vertical-division {
          width: var(--app-service-navbar-funcs-wrapper-double-func-vertical-division-width);
          height: var(--app-service-navbar-funcs-wrapper-double-func-vertical-division-height);
          background-color: var(--app-service-navbar-funcs-wrapper-double-func-vertical-division-background-color);
        }
        @e to-register {
          padding-left: 0.5rem;
          cursor: pointer;
          width: var(--app-service-navbar-funcs-wrapper-double-func-width);
          text-align: left;
        }
      }
    }
  }
}